document.querySelector('.middle_middle').addEventListener('click', function (e) {
    if (e.target.tagName === 'LI') {
        //删除这个
        const a = document.querySelector('.purple')
        a.classList.remove('purple')
        e.target.classList.add('purple')
    }
})

//渲染页面
var asadd = null
var ye = 1
var shu = 5
document.querySelector('.pagination').addEventListener('click', function (e) {
    console.dir(e.target)
    if (e.target.className === "page-link") {
        ye = e.target.dataset.id

        console.log(ye)
        console.log(e.target.dataset.id)
    }
    if (e.target.className === "page-link shang") {
        if (ye > 1) {
            ye = ye - 1
        } else {
            ye = 1
        }
        console.log(ye)
    }
    if (e.target.className === "page-link xia") {
        if (ye < 3) {
            ye = Number(ye) + 1
        } else {
            ye = 3
        }
        console.log(ye)
    }

    Rendering()

})
//点击事件

const all=document.querySelector('#all')
all.onclick=()=>{
    ye=+all.value
    Rendering()
    console.log(ye)
    
}

const ins = axios.create({
    baseURL: 'http://m10.ctymc.cn:24048',
})

function Rendering() {
    ins.get('/projectx').then((res) => {
        console.log(res)
        list = res.data
        console.log(list)
        let pian = list.slice((ye - 1) * shu, ye * shu < list.length ? ye * shu : list.length)
        const arr = pian.map(el => {
            return `
         <div class="ha">
         <span class="iconfont icon-gongsi" id="tu"></span>
         <div class="one">
             <span>${el.name}</span>
             <span>${el.miaoshu}</span>
         </div>
         <div class="two">
             <span>项目组长</span>
             <span>${el.zuzhang}</span>
         </div>
         <div class="three">
             <span> 创建时间</span>
             <span>${el.xm_data}</span>
         </div>
         <div class="four">
             <div class="nei"></div>
         </div>
         <button type="button" class="btn btn-primary" style="background-color: #9d9ee6;border: 1px solid #9d9ee6 ;" id="xiugai">编辑</button>
         <button type="button" class="btn btn-secondary" id="del" style="background-color: #989898;">删除</button>

     </div>
         `
        })
        document.querySelector('.footer').innerHTML = arr.join('')
        //删除
        document.querySelectorAll("#del").forEach((el, key) => {


            el.onclick = () => {
                const item = res.data[key].id;
                console.log(item)

                ins({
                    url: `/projectx/${item}`,
                    method: "DELETE",
                }).then((res) => {
                    Rendering()

                });
            };
        });
        //操作
        const modal = document.querySelector(".modal") //选出自己的模态框，想弹哪个选哪个
        const modalControl = new bootstrap.Modal(modal) //把模态框new成一个对象，将拥有两种方法
        document.querySelectorAll('#xiugai').forEach((el, i) => {
            el.onclick = () => {
                modalControl.show()
                //拿到这一行的数据
                const item = res.data[i];
                //把数据渲染到模态框里,数据回填
                asadd = item.id
                document.querySelector('[name="name"]').value = item.name
                document.querySelector('[name="miaoshu"]').value = item.miaoshu
                document.querySelector('[name="zuzhang"]').value = item.zuzhang
                //弹出模态框
            }
        })



    })
}
Rendering()


//添加
const submit = document.querySelector('#submit')
submit.onclick = () => {
    const form = document.querySelector('form')
    const a = new FormData(form)
    console.log(a.get('name'))
    console.log(a.get('miaoshu'))
    data = {
        miaoshu: a.get('miaoshu'),
        name: a.get('name'),
        xm_data: '2023-05-31',
        zuzhang: a.get('zuzhang'),
    }
    document.querySelector('[name="name"]').value = ''
    document.querySelector('[name="miaoshu"]').value = ''
    document.querySelector('[name="zuzhang"]').value = ''
    if (asadd === null) {
        ins({
            url: '/projectx',
            method: 'POST',
            data: data,
        }).then((res) => {

            Rendering()
        })
    } else {
        ins({
            url: `/projectx/${asadd}`,
            method: "PUT",
            data: data,
        }).then((res) => {
            Rendering()
            asadd === null
            document.querySelector('[name="name"]').value = ''
            document.querySelector('[name="miaoshu"]').value = ''
            document.querySelector('[name="zuzhang"]').value = ''

        })
    }
}